<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="80"
        :model="form"
        :rules="rules">

        <n-form-item label="客户名称" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入名称" />
        </n-form-item>
        <n-form-item label="单据日期" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入名称" />
        </n-form-item>
        <n-form-item label="业务团队" path="name">
            <jb-input v-model:value="form.name" placeholder="请输入名称" />
        </n-form-item>

        <jb-super-table
            ref="tableRef"
            :start-index="tableStartIndex"
            :data="list"
            :row-config="{  }">

            <jb-super-column
                type="seq"
                title="序号"
                width="60"
                fixed="left"
            ></jb-super-column>
            <jb-super-column
                field="orderNum"
                title="商品名称"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="num"
                title="规格"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="amount"
                title="单位"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="desc"
                title="仓库"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="isDelivered"
                title="数量"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="isDelivered"
                title="单价"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="isDelivered"
                title="金额"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column
                field="isDelivered"
                title="备注"
                min-width="140"
                editable="input"
                align="left"
                edit-submit-url="/api/admin/demoTable/updateColumn">
            </jb-super-column>
            <jb-super-column title="操作" width="110" fixed="right">
                <template #default="{ row }">
                    <jb-btn
                        tip-text="删除"
                        :icon="Icons.DELETE"
                        secondary
                        type="error"
                        class="mx-8px"
                        circle
                        confirm-text="确定删除这条数据？"
                        :url="`/api/admin/xdScmProduct/delete/${row.id}`"
                        @success="postPage?.loadData()"
                    ></jb-btn>
                </template>
            </jb-super-column>
        </jb-super-table>


    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'
import { Icons } from '@/constants'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'

const postPage = ref<InstanceType<typeof JbCrudPage> | null>(null)

const props = withDefaults(
    defineProps<{
        id?: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface PostType {
    id: string
    name: string
    is_deleted:number
}
const rules: FormRules = {
    // name: new Rules().required('请输入姓名').value,
    // userName: new Rules().required('请输入用户名').value,
    // type: new Rules().required('请选择类型').value,
    // sn: new Rules().required('请输入编码').value,
    // age: new Rules().gt(0).lt(150).value,
    // phone: new Rules().required().phone().value,
    // email: new Rules().email().value,
    // password: new Rules().minLength(6, '密码不能少于6位').value
}

const form = useResetableData<PostType>({
    id: '',
    name: '',
    is_deleted:0
})

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = props.id ? '/api/admin/xdScmTeam/update' : '/api/admin/xdScmTeam/save'

    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/xdScmTeam/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            form._reset(result.data)
        }
    )
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
